<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="true" class="demand_box" size='600px' @close="resetForm('addForm')">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">创建需求</span>
                <span class="icon_btn icon_btn_32"><img src="@/assets/img/close_check.svg" alt="" @click="resetForm('addForm')"></span>
            </div>
            <div class="demand_center flex gaydm_bg">
                <el-form label-position="top" style="margin-top:-10px" :model="addForm" size="medium" :hide-required-asterisk='true' ref="addForm" :rules="addVideoMultiSzRules" class="dialog_form">
                    <div class="demands_box" v-for="(item,index) in addForm.project" :key="index">
                        <div class="demands_head flexbox flexcenter flexbetween">
                            <div class="demands_num flexbox flexcenter">
                                项目 {{index+1}}
                            </div>
                            <div class="flexbox flexcenter">
                                <div class="demands_btn blue" @click="copyItem(item)">复制项目</div>
                                <div class="demands_btn red" @click="deletItem(index)">删除</div>
                            </div>
                        </div>
                        <el-form-item label="品牌/产品" prop="short_name" style="margin:10px 0">
                            <el-row :gutter="12">
                                <el-col :span="12">
                                    <el-form-item :prop="`project.${index}.brand_id`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                        <el-select v-model="item.brandSelect" placeholder="请选择品牌" filterable value-key='brand_id' style="width:100%" @change="(item) => selectBrand(item, index)">
                                            <el-option :label="items.brand_name" :value="items" v-for="items in bplist" :key="items.brand_id">
                                                <span>{{items.brand_name}}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item :prop="`project.${index}.product_id`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}">
                                        <el-select v-model="item.product_id" placeholder="请选择产品" filterable style="width:100%" :disabled="!item.brand_id" @change="(product_id) => selectProduct(product_id,item.brand_id,index)">
                                            <el-option :label="items.product_name" :value="items.product_id" v-for="items in item.productList" :key="items.product_id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="投放渠道" :prop="`project.${index}.channel`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" style="margin-bottom:10px">
                             <el-select v-model="item.channel" placeholder="选择投放渠道" size="small" @change="item.channel != 1 && (item.business_scene = 5)">
                                <el-option label="千川" :value="1"></el-option>
                                <el-option label="UD" :value="2"></el-option>
                                <el-option label="巨量" :value="3"></el-option>
                                <el-option label="腾讯" :value="4"></el-option>
                                <el-option label="TK" :value="5"></el-option>
                                <el-option label="京易投" :value="6"></el-option>
                             </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="业务场景" :prop="`project.${index}.business_scene`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" style="margin-bottom:10px">
                            <el-select v-model="item.business_scene" :disabled="!item.product_id" placeholder="请选择业务场景" style="width:100%">
                                <el-option :label="items.scene_name" :value="items.business_scene" v-for="items in item.sceneList" :key="items.business_scene"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="业务场景"  :prop="`project.${index}.business_scene`" :rules="{ required: true, message: '场景不能为空', trigger: 'blur'}">
                            <el-radio-group v-model="item.business_scene" size="mini">
                                <el-radio-button :class="{is_radio_show:item.channel != 1}" label="5">短视频</el-radio-button>
                                <el-radio-button label="6" v-if="item.channel == 1">直播</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="项目需求总数" :prop="`project.${index}.quantity`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" size="small" style="margin-bottom:0px">
                            <el-input-number class="resetNumBtn" v-model="item.quantity" controls-position="right" :min="1" style="width:80px"></el-input-number>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="demand_footer flexbox flexcenter gaydm_bg">
                <el-button plain size="small" class="el-button-width" @click="resetForm('addForm')">取 消</el-button>
                <el-button type="primary" size="small" class="el-button-width" @click="submitForm('addForm')" :loading="loading" :disabled='loading'>完成创建</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            bplist:[],//新品牌列表
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            optimiList: [], //剪辑列表
            centreList: [], //核心创意人
            addForm: {
                year: "",
                week: "",
                group: null,
                project: [
                    {
                        brand_id: "",
                        product_id: "",
                        channel: "",
                        business_scene: "5",
                        quantity: 1,
                        productList: [],
                        sceneList: [],
                        brandSelect: {},
                    },
                ],
            },
            addVideoMultiSzRules: {},
        };
    },
    created() {},
    methods: {
        getData(data) {
            this.dialogVisible = true;
            this.addForm.year = data.year;
            this.addForm.week = data.week;
            this.addForm.group = data.group;
            this.getBrandList();
            this.getOptimization();
            this.getCentreList();
            this.getBplist()
        },
        //获取品牌列表
        async getBplist(){
            const { data: res } = await this.$http.post("adminapi/brandv2/bpList",{limit:0});
            if (res.code !== 200) {
            return this.$message.error(res.msg);
            } else {
                this.bplist = res.data.list;
            }
        },
        //添加产品-品牌产品-产品选择器需要根据品牌取出数据
        filterBplist(id){
            if(!id)return;
            let arr =  this.bplist.find((e)=> e.brand_id == id)
            if(!arr)return;
            return arr.product;
        },
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList(brand_id, index) {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.addForm.project[index].productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList(product_id, brand_id, index) {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: brand_id,
                    product_id: product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.addForm.project[index].sceneList = res.data;
            }
        },

        // 获取剪辑列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreList = res.data;
            }
        },

        //品牌选择
        selectBrand(item, index) {
            this.addForm.project[index].brand_id = item.brand_id;
            // this.addForm.project[index].channel = item.channel;
            this.addForm.project[index].product_id = "";
            // this.addForm.project[index].business_scene = "";
            if(item.product && item.product.length>0){
                this.addForm.project[index].productList = item.product;
            }
            // this.getProductList(item.brand_id, index);
        },

        // 产品选择
        selectProduct(product_id, brand_id, index) {
            // this.addForm.project[index].business_scene = "";
            // this.getSceneList(product_id, brand_id, index);
        },

        // 提交添加
        submitForm(formName) {
             let queryInfo = JSON.parse(JSON.stringify(this.addForm));
                    for (let i in queryInfo.project) {
                        delete queryInfo.project[i].productList;
                        delete queryInfo.project[i].sceneList;
                        delete queryInfo.project[i].brandSelect;
                    }
                    console.log(queryInfo)
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let queryInfo = JSON.parse(JSON.stringify(this.addForm));
                    for (let i in queryInfo.project) {
                        delete queryInfo.project[i].productList;
                        delete queryInfo.project[i].sceneList;
                        delete queryInfo.project[i].brandSelect;
                    }
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/Demandszv2/demandProjectAdd",
                        queryInfo
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "保存成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.$emit("getDataList", 1);
                        this.$emit("getDataCount");
                        this.$emit("getStatistics");
                        this.resetForm(formName);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 复制列表
        copyItem(item) {
            let list = JSON.parse(JSON.stringify(item));
            this.addForm.project.push(list);
        },

        // 删除列表
        deletItem(index) {
            if (this.addForm.project.length <= 1) {
                return;
            } else {
                this.addForm.project.splice(index, 1);
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.addForm = {
                year: "",
                week: "",
                group: null,
                project: [
                    {
                        brand_id: "",
                        product_id: "",
                        channel: "",
                        business_scene: "5",
                        quantity: 1,
                        productList: [],
                        sceneList: [],
                        brandSelect: {},
                    },
                ],
            };
            this.dialogVisible = false;
        },
    },
    computed: {},
    components: {},
};
</script>

<style scoped>
/deep/ .el-drawer__header{
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.add_list {
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #4475ff;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
}
.step_boxs {
    height: 48px;
    background: #fff;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
    margin-top: 10px;
}
.step_boxs span {
    color: #17233d;
    max-width: 230px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gaydm_bg {
    background: #f2f4f7;
}
.demands_box {
    background: #fff;
    border-radius: 6px;
    margin-top: 12px;
    padding: 20px;
}
.demands_num {
    background: rgba(165, 177, 209, 0.1);
    border-radius: 3px;
    height: 28px;
    padding: 0 8px;
    font-size: 14px;
    color: #616c85;
}
.demands_num span {
    border-left: 1px solid #ebebeb;
    margin: 0 9px;
    height: 12px;
}
.demands_btn {
    line-height: 28px;
    height: 28px;
    width: 72px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    margin-left: 8px;
    cursor: pointer;
}
.demands_btn.blue {
    color: #4475ff;
    background: rgba(22, 93, 255, 0.05);
}
.demands_btn.red {
    color: #fe6262;
    background: rgba(254, 98, 98, 0.05);
}
.demands_title {
    margin-top: 24px;
    margin-bottom: 12px;
}
/deep/ .resetNumBtn .el-icon-arrow-up:before {
    content: "\e78f";
}
/deep/ .resetNumBtn .el-input-number__decrease,
/deep/ .resetNumBtn .el-input-number__increase {
    background: #fff;
}
/deep/ .resetNumBtn.el-input-number.is-controls-right .el-input__inner {
    padding-left: 5px;
    padding-right: 35px;
}

 /deep/ .is_radio_show .el-radio-button__inner{
  border-radius: 6px !important;
}
</style>


